<template>
	<view class="nationView bgf5">
		<view class="page-section">
			<view class="page-section-title">请选择</view>
			<view class="page-section-demo">
				<view class="search-outer">
					<input class="search-input" placeholder="请选择" @input="changeInp" :value="search" @confirm="doneSearch" />
					<text class="search-cancel" @click="clearSearch">取消</text>
				</view>
			</view>
		</view>
		<scroll-view class="listBox" :scroll-y="true" onScroll="scroll" :scroll-top="scrollTop">
			<view class="ul">
				<view class="li" v-for="item in nationList" @click="change(item)">
					<view class="span">{{ item.label }}</view>
				</view>
			</view>
		</scroll-view>
		<view class="closeBtn" @click="close">返回</view>
	</view>
</template>

<script>
	export default {
		name: 'myList',
		data() {
			return {
				focus: false,
				search: '',
				selectListA: [],
				nationList: [],
				scrollTop: 0,
			};
		},
		props: {
			onNewnation: info => {},
			item: {
				type: Object,
				value: {}
			},
			cheItem: {
				type: Object,
				value: {}
			},
			selectList: {
				type: Array,
				value: []
			}
		},
		mounted() {
			console.log(this.selectList,this.cheItem)
			this.selectListA = this.selectList;
			this.getList();
		},
		methods: {
			changeInp(e) {
				this.search = e.detail.value;
				this.getList();
				console.log("this", e, this.search)
			},
			setData(obj) {
				for(let key in obj) {
					this[key] = obj[key]
				}
			},
			close() {
				this.$emit('onNewnation', {
					close: true,
					myType: this.item.myType
				});
			},
			clearSearch() {
				this.setData({
					search: ''
				});
				this.getList();
			},
			getList() {
				let _this = this;
				let list = [];
				this.selectListA.forEach(item => {
					/*if(item.value == _this.props.item.value) {
						item.check = true;
					} else {
						item.check = false;
					}*/
					if(_this.search) {
						if(item.label.indexOf(_this.search) > -1) {
							list.push(item);
						}
					} else {
						list.push(item);
					}
				});
				console.log("list", list)
				this.setData({
					nationList: list
				});
			},
			scroll() {},
			handleSearch(e) {
				let v = e.detail.value;
				this.setData({
					search: v
				});
				this.getList();
			},
			doneSearch() {
				console.log(this.data);
			},
			change(obj) {
				this.$emit('onNewnation', {
					setVal: obj,
					myType: this.item.myType
				});
			}
		}
	};
</script>

<style lang="scss">
	.nationView {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background: #F5F5F5;
	}
	
	.nationView .page-section {
		padding-top: 120rpx;
	}
	
	.nationView .page-section .page-section-title {
		font-size: 41rpx;
		color: #333333;
		text-align: center;
	}
	
	.nationView .page-section .page-section-demo {
		width: 683rpx;
		height: 115rpx;
		background: #ffffff;
		border-radius: 6rpx;
		margin: 30rpx auto;
		padding-top: 14rpx;
	}
	
	.nationView .page-section .page-section-demo .search-outer {
		position: relative;
		width: 643rpx;
		height: 88rpx;
		background: #f2f2f2;
		border-radius: 6rpx;
		margin: 0 auto 0;
	}
	
	.nationView .page-section .page-section-demo .search-outer .search-cancel {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 24rpx;
		width: 113rpx;
		height: 61rpx;
		margin: auto;
		border-radius: 8rpx;
		opacity: 0.5;
		border: 1px solid #ff601a;
		color: #ff601a;
		text-align: center;
		line-height: 61rpx;
		z-index: 2;
	}
	
	.nationView .page-section .page-section-demo .search-outer .search-input {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: none;
		z-index: 1;
		padding-left: 79rpx;
	}
	
	.nationView .listBox {
		height: 730rpx;
	}
	
	.nationView .ul {
		height: auto;
		overflow: hidden;
		background: #ffffff;
		padding: 0 35rpx;
	}
	
	.nationView .ul .li {
		height: 104rpx;
		line-height: 100rpx;
		overflow: hidden;
		border-bottom: 1px solid #ededed;
		font-size: 24rpx;
	}
	
	.nationView .ul .select {
		color: #ff601a;
	}
	
	.nationView .closeBtn {
		width: 469rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #ff8900;
		font-size: 34rpx;
		color: #ff8327;
		text-align: center;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20rpx;
		margin: auto;
	}
</style>